<template>
  <demo-section>
    <demo-block title="基础用法">
      <van-cell
        is-link
        title="选择单个日期"
        :value="formatFullDate(date.selectSingle)"
        @click="show('single', 'selectSingle')"
      />
    </demo-block>

    <van-calendar
      v-model="showCalendar"
      :type="type"
      :color="color"
      :round="round"
      :position="position"
      :min-date="minDate"
      :max-date="maxDate"
      :max-range="maxRange"
      :formatter="formatter"
      :show-confirm="showConfirm"
      :confirm-text="confirmText"
      :confirm-disabled-text="confirmDisabledText"
      @confirm="onConfirm"
    />
  </demo-section>
</template>

<script>
const GREEN = '#07c160'

export default {
  data () {
    return {
      date: {
        maxRange: [],
        selectSingle: null,
        selectRange: [],
        selectMultiple: [],
        quickSelect1: null,
        quickSelect2: [],
        customColor: [],
        customConfirm: [],
        customRange: null,
        customDayText: [],
        customPosition: null
      },
      type: 'single',
      round: true,
      color: undefined,
      minDate: undefined,
      maxDate: undefined,
      maxRange: undefined,
      position: undefined,
      formatter: undefined,
      showConfirm: false,
      showCalendar: false,
      tiledMinDate: new Date(2012, 0, 10),
      tiledMaxDate: new Date(2012, 2, 20),
      confirmText: undefined,
      confirmDisabledText: undefined
    }
  },
  methods: {
    resetSettings () {
      this.round = true
      this.color = undefined
      this.minDate = undefined
      this.maxDate = undefined
      this.maxRange = undefined
      this.position = undefined
      this.formatter = undefined
      this.showConfirm = true
      this.confirmText = undefined
      this.confirmDisabledText = undefined
    },
    show (type, id) {
      this.resetSettings()
      this.id = id
      this.type = type
      this.showCalendar = true

      switch (id) {
        case 'quickSelect1':
        case 'quickSelect2':
          this.showConfirm = false
          break
        case 'customColor':
          this.color = GREEN
          break
        case 'customConfirm':
          this.confirmText = this.$t('confirmText')
          this.confirmDisabledText = this.$t('confirmDisabledText')
          break
        case 'customRange':
          this.minDate = new Date(2010, 0, 1)
          this.maxDate = new Date(2010, 0, 31)
          break
        case 'customDayText':
          this.minDate = new Date(2010, 4, 1)
          this.maxDate = new Date(2010, 4, 31)
          this.formatter = this.dayFormatter
          break
        case 'customPosition':
          this.round = false
          this.position = 'right'
          break
        case 'maxRange':
          this.maxRange = 3
          break
      }
    },
    formatDate (date) {
      if (date) {
        return `${date.getMonth() + 1}/${date.getDate()}`
      }
    },
    formatFullDate (date) {
      if (date) {
        return `${date.getFullYear()}/${this.formatDate(date)}`
      }
    },
    onConfirm (date) {
      this.showCalendar = false
      this.date[this.id] = date
    }
  }
}
</script>
